<template lang="pug">
el-drawer.handdraw-drawer(title="信息"
  :visible.sync="dialogVisible"
  direction="ltr"
  :size="widthVal"
  :with-header="false")
  .handdraw-drawer-content.boxsi
    .handdraw-title.flex.boxsi
      .handdraw-icon.boxsi.hand(@click="dialogVisible = false")
        i.el-icon-s-unfold
      .handdraw-txt(v-if="!pcModel && info.menus && info.menus.length>0")
        .handdraw-txt-item(v-for="(item, index) in info.menus" :key="index" @click.stop="openitem(item)") {{item.name}}

    .handdraw-image.boxsi
      img(:src="info.src" alt="")

    .handdraw-music.boxsi.flex(v-if="info.bgmusicUrl")
      .handdraw-music-img(:class="[open ? 'on': '']")
      .handdraw-music-title.flex.boxsi
        p.omit {{info.bgmusicName}}
        i.hand(@click.stop="playMusic" :class="[open ? 'el-icon-video-pause': 'el-icon-video-play']")

    .handdraw-info.boxsi
      .handdraw-info-title 景区信息
      .handdraw-info-time(v-if="info.opentime") 开放时间：
        span.info-color {{info.opentime}}
      .handdraw-info-address.flex.hand(v-if="info.address" @click="jumpPhoneAndAddress(1)")
        p.omit 地址：
          span.info-blue {{info.address}}
        p
          i.el-icon-position
      .handdraw-info-address.flex.hand(v-if="info.phone" @click="jumpPhoneAndAddress(2)")
        p.omit 电话：
          span.info-color {{info.phone}}
        p(style="background-color: #0f0;")
          i.el-icon-phone-outline

    .handdraw-intro.boxsi(v-if="info.intro")
      p.handdraw-intro-title 简介
      .handdraw-intro-txtcontent(v-if="info.intro")
        p.handdraw-intro-txt(v-for="(item, index) in info.intro.split('   ')") {{item}}
</template>

<script>
import { DeepCloneData, sortId, isPc } from '@/utils'

export default {
  props: ['open'],
  data() {
    return {
      widthVal: isPc() ? '30%': '82%',
      pcModel: isPc(),
      dialogVisible: false,
      info: {},
    }
  },
  mounted(){
    this.$vgo.on('handdraw:info', item => {
      if (!item) return
      this.info = item.data
      this.dialogVisible = true
    })
  },
  methods: {
    // 跳转
    jumpPhoneAndAddress(val) {
      if (val === 1) {
        let dataMap = `https://uri.amap.com/marker?position=${this.info.location_lng},${this.info.location_lat}&name=${this.info.address}&radius=110&src=mypage&coordinate=gaode&callnative=0&key=b65d581a9e00d6952661f5e0056e3649`
        window.open(dataMap)
      } else if (val === 2) {
        window.location.href = `tel:${this.info.phone}`
      }
    },
    // 播放音乐
    playMusic() {
      console.log(this.info.bgmusicUrl)
      this.$emit('playmusic')
    },
    // 展开菜单弹框
    openitem(item) {
      if (!item) return
      this.dialogVisible = false
      let contents = [], obj = []
      let tempItem = DeepCloneData(item)
      if (tempItem.children && tempItem.children.length > 0) {
        tempItem.children.map(temp => {
          if (temp.contents) {
            contents = JSON.parse(temp.contents)
            if (contents.length > 0) {
              contents.sort(sortId)
            }
          }
          temp.newData = contents
          temp.title = temp.name
        })
        obj = tempItem.children
      } else {
        if (tempItem.contents) {
          contents = JSON.parse(tempItem.contents)
          if (contents.length > 0) {
            contents.sort(sortId)
          }
        }
        tempItem.newData = contents
        tempItem.title = tempItem.name
        obj = [tempItem]
      }

      this.$vgo.emit('dialog:mutil', {
        data: obj,
        biaoji: 1,
      })
    },
    // 清除数据
    close() {
      this.dialogVisible = false
      this.info = {}
    },
  }
}
</script>

<style lang="stylus" scoped>
@keyframes musicAnimation
  0%
    transform rotate(0)
  100%
    transform rotate(360deg)

.handdraw-drawer
  .handdraw-drawer-content
    padding 0
    background-color #eee
    width 100%
    .handdraw-title
      height 48px
      width 100%
      background-color #fff
      padding 0 10px
      width 100%
      .handdraw-icon
        line-height 48px
        width 30px
        .el-icon-s-unfold
          font-size 20px
          color #409EFF
      .handdraw-txt
        width calc(100% - 30px)
        overflow-x auto
        overflow-y auto
        white-space nowrap
        padding 12px 0 20px
        &::-webkit-scrollbar {display:none}
        .handdraw-txt-item
          padding 0 12px
          display inline-block
          color #333333
          font-size 14px
          border-right 1px solid #ddd
          &:last-child
            border-right 0

    .handdraw-image
      img
        width 100%

    .handdraw-music
      width 100%
      height 70px
      padding 10px
      background-color #fff
      .handdraw-music-img
        width 50px
        height 50px
        position relative
        margin-right 10px
        &:before
          content ''
          background url(/static/images/handdraw/global.png) no-repeat
          background-position -77.568px -0.768px
          background-size 307.2px
          width 50px
          height 50px
          position absolute
        &:after
          content ''
          background-color #ee7702
          width 15px
          height 15px
          position absolute
          top 50%
          left 50%
          border-radius 50%
          transform translate(-50%, -50%)
        &.on
          &:before
            animation musicAnimation 20s linear 0s infinite normal
          &:after
            background url(/static/images/handdraw/global.png) no-repeat
            width 15px
            height 15px
            border-radius 0
            background-size 280px
            background-position -175.7px -105.7px
      .handdraw-music-title
        width calc(100% - 60px)
        line-height 50px
        justify-content space-between
        p
          max-width 70%
          color #333333
          font-size 16px
          font-weight 700
        i
          line-height 50px
          font-size 30px
          color #ee7702

    .handdraw-info
      background-color #fff
      margin-top 10px
      padding 20px 10px
      .handdraw-info-title
        color #333
        font-size 16px
        font-weight 700
      .handdraw-info-time
        color #666
        font-size 14px
        margin-top 10px
      .handdraw-info-address
        color #666
        font-size 14px
        margin-top 10px
        justify-content space-between
        p:last-child
          background-color #409EFF
          border-radius 50%
          width 16px
          height 16px
          text-align center
          line-height 16px
          i
            color #fff
            font-size 12px
      .info-color
        color #333
      .info-blue
        color #409EFF

    .handdraw-intro
      background-color #fff
      margin-top 10px
      padding 10px
      
      .handdraw-intro-title
        color #333
        font-size 16px
        font-weight 700
      .handdraw-intro-txt
        color #333
        font-size 14px
        white-space pre-wrap
        line-height 20px
        text-indent 27px
      
</style>
<style lang="stylus">
.el-drawer
  outline none
  overflow-x auto
  overflow-y auto
</style>
